iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0

文章同步更新在 CodeFictionist

相信你有實在逛一些網站時,尤其那種電商平台,你可能會注意到有一些網站的設計是當你滑鼠懸停在圖片上時圖片會有一個放大的效果,讓你可以明確知道你正在關注哪項商品,而且也增加了一些互動性。
這樣的效果其實非常容易實現,主要就是透過我們第二天提到的 CSS 變形,透過 transformtransition 來達成。

圖片懸停縮放效果

我們直接來看範例:

<div class="container">
 <div class="image-wrapper">
  <img src="https://i.postimg.cc/bJs0ZYPS/DSC-1027.jpg" alt="Sample Image">
 </div>
</div>
.image-wrapper img {
 transition: transform 0.3s ease-in-out;
}

.image-wrapper:hover img {
 transform: scale(1.2);
}

圖片懸停時放大

範例 - 圖片懸停縮放

解釋一下上面發生什麼事:

  1. transition: transform 0.3s ease-in-out;:這行 CSS 代表當圖片的 transform 屬性發生變化時,會有 0.3 秒的過渡效果,並且是以 ease-in-out 的方式變化。
  2. transform: scale(1.2);:這行 CSS 代表當滑鼠懸停在圖片上時,圖片會放大 1.2 倍。

結語

其實就是廢話啦,一旦從一些基礎理論進到實作,其實很多東西寫成文章不過就寥寥幾行,只是平常有沒有想到這樣應用而已。
打這個結語其實就是來水字數的 www
反正之後應該會慢慢都變這種簡短風格,畢竟有些東西真的實際做起來真的很簡單。


上一篇
Day 07 - 模糊與濾鏡效果
下一篇
Day 09 - 漸變背景動畫
系列文
一天一項 CSS 小技巧:打造視覺與互動效果30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言